<template>
	<view class="content">
		<custom-header title="信息收集"></custom-header>
		<view class="cont">
			<view class="label1">
				<span>资料填写</span> 
			</view>
			<view class="table">
				<view class="uni-common-mt">
					<view class="uni-form-item uni-column">
						<view class="title">姓名</view>
						<input class="uni-input" focus placeholder="请输入您的名字" v-model="info.name" />
					</view>
					<view class="uni-form-item uni-column">
						<view class="title">手机号</view>
						<input class="uni-input" confirm-type="search" placeholder="请输入您的手机号码..."
							v-model="info.phone" />
					</view>
					<view class="uni-form-item uni-column ">
						<view class="title">是否开车</view>
						<view class="radio">
							<u-radio-group v-model="info.is_drive">
								<view class="radio-one">
									<u-radio activeColor="#59B6B9" label="是" name="1"></u-radio>
								</view>
								<view class="">
									<u-radio activeColor="#59B6B9" label="否" name="0"></u-radio>
								</view>
							</u-radio-group>
						</view>

						<input v-show="info.is_drive==='1'" v-model="license_plate_number" class="uni-input"
							confirm-type="search" placeholder="请输入您的车牌号..." />
					</view>
					<view class="uni-form-item uni-column ">
						<view class="title">是否接站</view>
						<view class="radio">
							<u-radio-group v-model="info.is_station">
								<view class="radio-one">
									<u-radio activeColor="#59B6B9" label="是" name="1"></u-radio>
								</view>
								<view class="">
									<u-radio activeColor="#59B6B9" label="否" name="0"></u-radio>
								</view>
							</u-radio-group>
						</view>
						<view class="go_class" v-if="info.is_station==='1'">
							<view class="uni-form-item uni-column par">
								<view class="title">出行方式</view>
								<view :class="['flex','goout',isShow?'bor0':'']">
									<view :class="['flex1',isShow?'m-line':'']">
										{{stand.travel_mode}}
									</view>
									<view class="jiantou" @click="isShow=!isShow">
									</view>
									<view class="abs" v-if="isShow">
										<view v-for="(item,index) in outMethods" @click="hanleoutMethods(index)">
											{{item}}
										</view>
									</view>
								</view>

							</view>
							<view class="uni-form-item uni-column">
								<view class="title">到达时间</view>
								<input v-model="stand.arrival_time" class="uni-input" confirm-type="search"
									placeholder="请输入您的到达时间..." />
							</view>
							<view class="uni-form-item uni-column">
								<view class="title">接站地点</view>
								<input v-model="stand.station_address" class="uni-input" confirm-type="search"
									placeholder="请输入您的接站地点..." />
							</view>
						</view>
					</view>
					<view class="uni-form-item uni-column ">
						<view class="title">是否就餐</view>
						<view class="radio">
							<u-radio-group v-model="info.is_dining">
								<view class="radio-one">
									<u-radio activeColor="#59B6B9" label="是" name="1"></u-radio>
								</view>
								<view class="">
									<u-radio activeColor="#59B6B9" label="否" name="0"></u-radio>
								</view>
							</u-radio-group>
						</view>
						<view class="" v-if="info.is_dining==='1'">
							<view class="title">就餐时间</view>
							<view class="radio">
								<u-radio-group v-model="dining.dining_time">
									<view class="radio-tne">
										<u-radio activeColor="#59B6B9" label="早上(7~9)" name="早上(7~9)"></u-radio>
									</view>
									<view class="radio-tne">
										<u-radio activeColor="#59B6B9" label="中午(11~1)" name="中午(11~1)"></u-radio>
									</view>
									<view class="">
										<u-radio activeColor="#59B6B9" label="晚上(5~7)" name="晚上(5~7)"></u-radio>
									</view>
								</u-radio-group>
							</view>
						</view>

					</view>
				</view>
				<view class="btn" @click="upload">保存并提交</view>
			</view>
		</view>
		<custom-tabbar></custom-tabbar>
	</view>
</template>

<script>
	import {
		Postgather
	} from '../../api/sen/index.js';
	export default {
		data() {
			return {
				info: {
					mid: '1',
					name: '',
					phone: '',
					is_drive: '1', //是否开车
					is_station: '1', //接站
					is_dining: '1', //就餐
				},
				// 车牌号
				license_plate_number: '',
				// 出行结果
				stand: {
					travel_mode: '高铁',
					arrival_time: '',
					station_address: '',
				},
				// 就餐时间
				dining: {
					dining_time: '早上(7~9)'
				},
				// 出行方式
				outMethods: [
					'飞机', '客车', '火车', '其他'
				],
				isShow: false
			}
		},
		onLoad() {
			this.info.mid = uni.getStorageSync('id')
		},
		watch: {
			is_drive(e, f) {
				console.log(e, 'sfsfsf', f);
			},
			is_station(e, f) {
				console.log(e, 'sfsfsf', f);
			}
		},

		methods: {
			hanleoutMethods(index) {
				this.outMethods.unshift(this.stand.travel_mode)
				this.stand.travel_mode = this.outMethods[index + 1]
				this.outMethods.splice(index + 1, 1)
				this.isShow = false
			},
			upload() {
				if (!this.info.name) {
					this.$u.toast('请输入姓名')
					return
				} else if (!this.info.phone) {
					this.$u.toast('请输入手机号')
					return
				} else if (this.info.phone.length != 11) {
					this.$u.toast('请输入正确的手机号')
					return
				}

				if (this.info.is_drive === '1') {
					if (!this.license_plate_number) {
						this.$u.toast('请输入车牌号')
						return
					}
					this.info.license_plate_number = this.license_plate_number
				}
				if (this.info.is_station === '1') {
					if (!this.stand.arrival_time) {
						this.$u.toast('请输入到达时间')
						return
					} else if (!this.stand.station_address) {
						this.$u.toast('请输入接站地点')
						return
					}
					this.info.travel_mode = this.stand.travel_mode
					this.info.arrival_time = this.stand.arrival_time
					this.info.station_address = this.stand.station_address
				}
				if (this.info.is_dining === '1') {
					this.info.dining_time = this.dining.dining_time
				}
				Postgather(this.info).then(res => {
					if (res.data.code == 200) {
						this.$u.toast('提交成功')
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/index/index'
							})
							this.$store.commit('sen/checkInde', 1)
						}, 1500)

					}
				})

			}
		},

	}
</script>

<style lang="scss" scoped>
	.btn {
		width: 60%;
		margin: 0 auto;
		border: 1px solid red;
		height: 100rpx;
		text-align: center;
		line-height: 90rpx;
		margin-top: 80rpx;
		margin-bottom: 20rpx;
		border-radius: 40rpx;
		border: 5rpx solid white;
		color: white;
		box-shadow: 0 0 20rpx 5rpx #5AB7BA;
		font-size: 40rpx;
		background-color: #5FB8BB;
	}

	.m-line {
		border-bottom: 1px solid #E5E5E5;
	}

	.radio-tne {
		margin-right: 110rpx;
	}

	.abs {
		position: absolute;

		top: 72rpx;
		border-radius: 0 0 20rpx 20rpx;
		background-color: white;
		padding: 3rpx;
		z-index: 9;
		line-height: 70rpx;
		text-align: center;
		width: 119rpx;

		>view:not(:last-child) {
			border-bottom: 1px solid #E5E5E5;
		}
	}

	.flex1 {
		text-align: center;
		flex: 1;
	}

	.goout {
		background-color: white;
		width: 170rpx;
		font-size: 35rpx;
		border-radius: 20rpx;
		line-height: 70rpx;
		margin-left: 40rpx;
		position: relative;

		.jiantou {
			background-color: #5BB6B9;
			width: 30%;
			border-radius: 0 20rpx 20rpx 0;
			position: relative;
		}
	}
	.bor0 {
		border-radius: 20rpx 20rpx 20rpx 0 !important;
	}

	.jiantou::before {
		display: block;
		content: "";
		width: 0;
		height: 0;
		z-index: 9;
		position: absolute;
		top: 40%;
		left: 20%;
		border-top: 7px solid white;
		border-bottom: 7px solid transparent;
		border-left: 7px solid transparent;
		border-right: 7px solid transparent
	}

	.go_class {
		width: 89%;
		margin: 0 auto;
		background-color: #DFF9F6;
		border-radius: 30rpx;
		padding: 0 0 40rpx 0;

		input {
			background-color: white;
			width: 80%;
			margin-left: 40rpx;
		}
	}

	.radio-one {
		margin-right: 150rpx;
	}

	.radio {
		margin-left: 40rpx;
		margin-bottom: 30rpx;
	}

	.uni-input {
		width: 90%;
		margin: 0 auto;
		transition: linear 1s;
		height: 100rpx;
		border-radius: 30rpx;
		background-color: #DFF9F6;
		text-indent: 20rpx;
	}

	.uni-form-item {
		min-height: 150rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.title {
		font-size: 40rpx;
		line-height: 100rpx;
		margin-left: 40rpx;
		color: rgb(41, 64, 58)
	}

	.label1 {
		font-size: 40rpx;
		height: 150rpx;
		line-height: 120rpx;
		padding-left: 25rpx;
		font-weight: 900;
		border-bottom: 2rpx solid #EBEBEB;
		position: relative;
		span{
		color: rgb(41, 64, 58)
		}
	}

	.label1::before {
		display: block;
		content: "";
		width: 100rpx;
		height: 12rpx;
		background-color: #99DAE0;
		position: absolute;
		bottom: 40rpx;
		border-radius: 40rpx;
		left: 55rpx;
	}

	page {
		background-color: #f5fffe;
		padding-bottom: 0upx;
		background: url(../../static/index/Group.png);
		background-attachment: fixed;
		background-position: -180upx 450upx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.cont {
		// background-color: #FBFFFF;
		margin-top: 20rpx;
		border-radius: 30rpx ;
		min-height: 100vh;
		padding: 0 20rpx 50rpx 20rpx;
		box-sizing: border-box;
		background-color: rgba(255, 255, 255, 0.8) !important

	}

	.content {
		padding: 0 10rpx;
		padding: 100upx 0 200rpx 0 !important;
	}
</style>